<style lang="less" scoped>
.cf {
  clear: both;
}
.noDate_page {
  padding-top:2rem;
}
</style>

<!--司机端提货签收列表页-->
<template>
	<div class="gridContainer">
    <manage-header></manage-header>
    <header-car :status="4"></header-car>


    <scroller lock-x scrollbar-y use-pullup :height="scrollerHeight" @on-pullup-loading="getData" v-if="totalRecords > 0" :pullup-config="ScrollerConfig" ref="Scroller">
      <div>
        <div class="acpt-list" v-for="(item, index) in datas">
          <div class="acpt-list-wrap mb30">
            <div class="acpt-list-head cf">
              <span class="txt f-l">业务单号：{{item.BBillNo}}</span>
            </div>
            <div class="displayflex acpt-list-body lineb">
              <span class="cargo">
                <i class="iconfont icon-cargo"></i>
                <p>{{item.Pkgs}}件</p>
              </span>
              <div class="txt flex1">
                <p class="ft17">{{item.PickContacts}} {{item.PickContactsTel}}</p>
                <p>取货地址：{{item.DepartureCity | city}}{{item.DepartureDistrict | district}}{{item.DepartureAddress}}</p>
                <p>送货地址：{{item.ArrivalCity | city}}{{item.ArrivalDistrict | district}}{{item.ArrivalAddress}}</p>
              </div>
            </div>
            <div class="btn-grp txt-rit">
              <!-- <div class="btn ml10" @click="viewOrderDetail(item.BBillGuid)">详情</div> -->
              <div class="btn ml10" @click="openQrCode(item.BBillNo)" v-if="item.LogState == '56'">签收二维码</div>
            </div>
          </div>
        </div>
      </div>
    </scroller>

    <div class="noDate_page" v-if="totalRecords == 0">
			<div class="noDate_icon"><i class="iconfont icon-null"></i></div>
			暂无数据，请通知所属公司派单！
		</div>
    <x-dialog v-model="showQrcode" class="qrcode-wrap">
      <div class="llse-cadd llse close" @click="showQrcode=false"></div>
      <qrcode class="qrcode-img" :value="qrCodeValue"></qrcode>
      <p class="qrcode-txt">请扫二维码确认签收</p>
    </x-dialog>
    <div class="w100fix"></div>
    <footer-menu :status='1'></footer-menu>
  </div>
</template>

<script>
import manageHeader from "@/components/core/header/manage.header.vue";
import headerCar from '@/components/core/header/driver-progress.vue'
import footerMenu from "@/components/core/footer/manage.footer.vue";
import { mapGetters, mapState } from "vuex";
import { Qrcode,XDialog  } from 'vux'


export default {
  components: {
    footerMenu, 
    headerCar,
    manageHeader,
    Qrcode,
    XDialog 
  },
  data() {
    return {
      datas:[],
      showQrcode:false,
      totalRecords:0,
      PageIndex: 1,
      PageSize: 8,
      noMore:false,
      ScrollerConfig: {
        content: "上拉加载",
        downContent: "上拉加载",
        height: 0,
        loadingContent: "加载中...",
        upContent: "上拉加载"
      },
      qrCodeValue:''
    }
  },
  computed:{
    ...mapState({
      pagetitle: state => state.cfg.appBarTitle,
      showstate: state => state.cfg.showAppBar,
    }),
    ...mapGetters({
      scrollerHeight: "cfg/getConHeight"
    }),
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null;
    }
  },
  created(){
    this.getData();
  },
  mounted(){
    this.$store.dispatch("cfg/setConHeight");
  },
  methods: {
    openQrCode(billno){
      this.showQrcode = true;
      this.qrCodeValue = billno;
    },
    getData(){
      let query = {
        DriverGuid: this.userinfo.StaffID,
        // State: "81",
        StateList: ['81', '56'],
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      };
      this.Ajax.post("GetDriverOrderList", query).then(resp => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords;
          if (resp.Datas && resp.Datas.length > 0) {
            this.PageIndex++;
            this.datas = this.datas.concat(resp.Datas);
            this.ScrollControl();
          }
        } else {
          this.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });
    },
    viewOrderDetail(BBillGuid) {
      this.$router.push({
        path:'senddingdetailorder',
        query:{
          Guid: BBillGuid,
        }
      });
    },
    ScrollControl() {
      if (this.totalRecords <= this.PageSize) {
        this.ScrollerConfig.content = "";
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if (this.datas.length > 0 && this.$refs.Scroller) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.datas.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
}
</script>